<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import SendEmail from "../sendEmail";
import { copyToClipboard } from "../../utils";


const props = defineProps(["url", "height", "dataJson", 'selectFile']);
const route = useRoute();

const isShow = ref(false);
const heightValue = ref(props.height);


const fileUrl = ref(props.url)
const value = ref(props.dataJson[props.selectFile][0]?.value);
const copyHtml = import.meta.env.VITE_CAS_URL + "/html/document" + decodeURI(route.path);

// div 高度
const scrollHeight = computed(() => {
  const height = Number(props.height);
  return `height: calc(100vh - ${height}px)`;
})

function valueFn(val){
  console.log("valueFn",val);
  fileUrl.value = props.dataJson[props.selectFile][val].url
}

// dom加载之后
onMounted(() => {

});

</script>
<template>
  <div>
    <div class="home-top" v-if="heightValue >= 40">
      <div class="left">
        版本日期
        <el-select
          v-model="value"
          placeholder="版本日期"
          style="width: 120px; margin-left: 10px"
          @change="valueFn"
        >
          <el-option
            v-for="item in props.dataJson[props.selectFile]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="f">
        <div class="btn" @click="copyToClipboard(copyHtml)">复制地址</div>
        <div class="btn" @click="isShow = true">下载</div>
      </div>
    </div>
    <div
      class="overflow-y-scroll"
      id="pdf"
      :style="scrollHeight"
    >
    <iframe :src="fileUrl" id="iframe-wap"/>
    </div>
  </div>
  <SendEmail v-model:show="isShow" :dataJson="dataJson" :selectValue="value"/>
</template>

<style scoped lang="scss">
.home-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 12px;

    .left {
        display: flex;
        align-items: center;
    }

    .f {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .btn {
        margin-left: 10px;
        line-height: 30px;
        height: 30px;
        border: 1px solid rgb(215, 0, 0);
        border-radius: 30px;
        min-width: 60px;
        padding: 0 10px;
        background: rgb(255, 241, 241);
        color: rgb(215, 0, 0);
        cursor: pointer;
    }
}
#iframe-wap{
  border: none;
  width: 100%;
  height: 100%;
}
.overflow-y-scroll {
    background: #f2f3f5;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .canvas-div{
      display: flex;
      justify-content: center;
      padding-bottom: 4px;
      >canvas{
        border-radius: 2px;
        box-shadow: 0 -1px 8px 0 rgba(0,0,0,0.06);
      }
  }
}
</style>
